<template>
  <a-drawer
    :maskClosable="true"
    width="1100"
    placement="right"
    :closable="false"
    @close="handleCancel"
    :destroyOnClose="true"
    :visible="visible"
    :footer="null"
  >
    <a-row :gutter="16">
      <!-- 建筑物列 -->
      <a-col :span="8">
        <div class="building-list">
          <div class="header">
            <h3>建筑物列表</h3>
            <a-button type="primary" @click="showBuildingModal"
              >新增建筑物</a-button
            >
          </div>
          <a-list
            :dataSource="buildings"
            :loading="buildingLoading"
            itemLayout="horizontal"
          >
            <a-list-item
              slot="renderItem"
              slot-scope="item"
              @click="handleBuildingClick(item)"
              :class="{
                active: currentBuilding && currentBuilding.id === item.id,
              }"
            >
              <a-list-item-meta>
                <template slot="title">
                  <span>{{ item.buildingName }}</span>
                </template>
              </a-list-item-meta>
              <div slot="actions">
                <a @click="editBuilding(item)"><a-icon type="edit" /></a>
                <a-popconfirm
                  title="确定删除此建筑物吗?"
                  @confirm="deleteBuilding(item.id)"
                >
                  <a
                    ><a-icon
                      type="delete"
                      style="margin-left: 10px; color: red"
                  /></a>
                </a-popconfirm>
              </div>
            </a-list-item>
          </a-list>
        </div>
      </a-col>

      <!-- 楼层列 -->
      <a-col :span="8">
        <div class="floor-list">
          <div class="header">
            <h3>楼层列表</h3>
            <a-button
              v-if="currentBuilding"
              type="primary"
              @click="showFloorModal"
              :disabled="!currentBuilding"
            >
              新增楼层
            </a-button>
          </div>
          <a-list
            :dataSource="floors"
            :loading="floorLoading"
            itemLayout="horizontal"
          >
            <a-list-item
              slot="renderItem"
              slot-scope="item"
              @click="handleFloorClick(item)"
              :class="{ active: currentFloor && currentFloor.id === item.id }"
            >
              <a-list-item-meta>
                <template slot="title">
                  <span>{{ item.floorName }}</span>
                </template>
              </a-list-item-meta>
              <div slot="actions">
                <a @click="editFloor(item)"><a-icon type="edit" /></a>
                <a-popconfirm
                  title="确定删除此楼层吗?"
                  @confirm="deleteFloor(item.id)"
                >
                  <a
                    ><a-icon
                      type="delete"
                      style="margin-left: 10px; color: red"
                  /></a>
                </a-popconfirm>
              </div>
            </a-list-item>
          </a-list>
        </div>
      </a-col>

      <!-- 房间列 -->
      <a-col :span="8">
        <div class="room-list">
          <div class="header">
            <h3>房间列表</h3>
            <a-button
              v-if="currentFloor"
              type="primary"
              @click="showRoomModal"
              :disabled="!currentFloor"
            >
              新增房间
            </a-button>
          </div>
          <a-list
            :dataSource="rooms"
            :loading="roomLoading"
            itemLayout="horizontal"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <a-list-item-meta>
                <template slot="title">
                  <span>{{ item.roomName }}</span>
                </template>
                <template slot="description">
                  <span>面积: {{ item.usableArea }}㎡</span>
                </template>
              </a-list-item-meta>
              <div slot="actions">
                <a @click="editRoom(item)"><a-icon type="edit" /></a>
                <a-popconfirm
                  title="确定删除此房间吗?"
                  @confirm="deleteRoom(item.id)"
                >
                  <a
                    ><a-icon
                      type="delete"
                      style="margin-left: 10px; color: red"
                  /></a>
                </a-popconfirm>
              </div>
            </a-list-item>
          </a-list>
        </div>
      </a-col>
    </a-row>
    <!-- 建筑 -->
    <dev-campus-building-edit
      ref="campusBuildingEditRef"
      @ok="handleBuildingEditOk"
    ></dev-campus-building-edit>
    <!-- 楼层 -->
    <dev-campus-building-floor-edit
      ref="campusBuildingFloorEditRef"
      @ok="handleBuildingFloorEditOk"
    ></dev-campus-building-floor-edit>

    <dev-campus-building-floor-room-edit
      ref="campusBuildingFloorRoomEditRef"
      @ok="handleBuildingFloorRoomEditOk"
    ></dev-campus-building-floor-room-edit>
  </a-drawer>
</template>

<script>
import { deleteAction, postAction, getAction } from '@/api/manage'
import DevCampusBuildingEdit from '../devCampusBuilding/DevCampusBuildingEdit.vue'
import DevCampusBuildingFloorEdit from '../devCampusBuildingFloor/DevCampusBuildingFloorEdit.vue'
import DevCampusBuildingFloorRoomEdit from '../devCampusBuildingFloorRoom/DevCampusBuildingFloorRoomEdit.vue'
export default {
  name: 'DevCampusGl',
  components: {
    DevCampusBuildingEdit,
    DevCampusBuildingFloorEdit,
    DevCampusBuildingFloorRoomEdit,
  },
  data() {
    return {
      visible: false,
      // 建筑物数据
      buildings: [],
      buildingLoading: false,
      currentBuilding: null,

      // 楼层数据
      floors: [],
      floorLoading: false,
      currentFloor: null,

      // 房间数据
      rooms: [],
      roomLoading: false,

      // 编辑状态
      isEditBuilding: false,
      isEditFloor: false,
      isEditRoom: false,

      // 当前编辑项ID
      currentEditId: null,
      campusAreaId: undefined,
      buildingId: undefined,
      floorId: undefined,
      // 表单
      buildingForm: this.$form.createForm(this),
      floorForm: this.$form.createForm(this),
      roomForm: this.$form.createForm(this),
      url: {
        getCampusBuildingList: 'system/devCampusBuilding/getList',
        getCampusBuildingFloorList: 'system/devCampusBuildingFloor/getList',
        getCampusBuildingFloorRoomlist:
          '/system/devCampusBuildingFloorRoom/list',
        deleteCampusBuilding: '/system/devCampusBuilding/delete',
        deleteCampusBuildingFloor: '/system/devCampusBuildingFloor/delete',
        deleteCampusBuildingFloorRoom:
          '/system/devCampusBuildingFloorRoom/delete',
      },
    }
  },

  created() {
    //this.fetchBuildings()
  },

  methods: {
    // 查看
    view(record) {
      console.log('管理页面:', record.id)
      this.campusAreaId = record.id
      this.visible = true
      this.fetchBuildings()
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    // 获取建筑物列表
    async fetchBuildings() {
      this.buildingLoading = true
      try {
        getAction(this.url.getCampusBuildingList, {
          campusAreaId: this.campusAreaId,
        }).then((res) => {
          this.buildings = res.result.data
          if (this.buildings) {
            this.buildings = this.buildings.map((item) => ({
              ...item,
              editing: false,
            }))
          }
        })
      } catch (error) {
        this.$message.error('获取建筑物列表失败')
      } finally {
        this.buildingLoading = false
      }
    },

    // 显示新增建筑物模态框
    showBuildingModal() {
      this.isEditBuilding = false
      this.currentEditId = null
      this.buildingForm.resetFields()
      console.log('this.campusAreaId??>', this.campusAreaId)
      //调用建筑物新增方法
      this.$nextTick(() => {
        this.$refs.campusBuildingEditRef.add(this.campusAreaId)
      })
    },

    // 编辑建筑物
    editBuilding(item) {
      this.isEditBuilding = true
      this.currentEditId = item.id

      this.$nextTick(() => {
        //调用建筑物新增方法
        this.$refs.campusBuildingEditRef.edit(item)
      })
    },

    // 删除建筑物
    async deleteBuilding(id) {
      try {
        deleteAction(this.url.deleteCampusBuilding, { ids: id }).then(
          (resp) => {
            this.$message.success('删除成功!')
            if (this.currentBuilding && this.currentBuilding.id === id) {
              this.currentBuilding = null
              this.floors = []
              this.rooms = []
            }
            this.fetchBuildings()
          }
        )
      } catch (error) {
        this.$message.error('删除失败')
      }
    },

    // 提交建筑物表单
    async handleBuildingEditOk() {
      this.fetchBuildings()
    },

    // 点击建筑物
    async handleBuildingClick(building) {
      this.currentBuilding = building
      this.currentFloor = null
      this.buildingId = building.id
      this.fetchFloors(building.id)
    },

    // 获取楼层列表
    async fetchFloors(buildingId) {
      this.floorLoading = true
      try {
        getAction(this.url.getCampusBuildingFloorList, {
          buildingId: buildingId,
        }).then((res) => {
          this.floors = res.result.data
          if (this.floors) {
            this.floors = this.floors.map((item) => ({
              ...item,
              editing: false,
            }))
          }
        })
        this.rooms = [] // 清空房间列表
      } catch (error) {
        this.$message.error('获取楼层列表失败')
      } finally {
        this.floorLoading = false
      }
    },
    // 显示新增楼层模态框
    showFloorModal() {
      this.isEditFloor = false
      this.currentEditId = null
      this.floorForm.resetFields()

      this.$nextTick(() => {
        //调用建筑物新增方法
        var item = {
          buildingId: this.currentBuilding.id,
          campusAreaId: this.campusAreaId,
        }
        this.$refs.campusBuildingFloorEditRef.add(item)
      })
    },
    // 编辑楼层
    editFloor(item) {
      this.isEditFloor = true
      this.currentEditId = item.id
      this.$nextTick(() => {
        //调用楼层新增方法
        this.$refs.campusBuildingFloorEditRef.edit(item)
      })
    },

    // 提交楼层表单
    async handleBuildingFloorEditOk() {
      this.fetchFloors(this.currentBuilding.id)
    },

    // 删除楼层
    async deleteFloor(id) {
      try {
        deleteAction(this.url.deleteCampusBuildingFloor, { ids: id }).then(
          (res) => {
            this.$message.success('删除成功')
            if (this.currentFloor && this.currentFloor.id === id) {
              this.currentFloor = null
              this.rooms = []
            }
            this.fetchFloors(this.currentBuilding.id)
          }
        )
      } catch (error) {
        this.$message.error('删除失败')
      }
    },

    // 点击楼层
    async handleFloorClick(floor) {
      this.currentFloor = floor
      this.fetchRooms(floor.id)
    },

    // 获取房间列表
    async fetchRooms(floorId) {
      this.roomLoading = true
      try {
        var parameter = { pageNo: 1, pageSize: 1000000 }

        postAction(
          this.url.getCampusBuildingFloorRoomlist,
          Object.assign(parameter, { floorId: floorId })
        ).then((res) => {
          this.rooms = res.result.data.records
          if (this.rooms) {
            this.rooms = this.rooms.map((item) => ({ ...item, editing: false }))
          }
        })
      } catch (error) {
        this.$message.error('获取房间列表失败')
      } finally {
        this.roomLoading = false
      }
    },

    // 显示新增房间模态框
    showRoomModal() {
      this.isEditRoom = false
      this.currentEditId = null
      this.roomForm.resetFields()

      this.$nextTick(() => {
        //调用建筑物新增方法
        var item = {
          buildingId: this.currentBuilding.id,
          campusAreaId: this.campusAreaId,
          floorId: this.currentFloor.id,
        }
        this.$refs.campusBuildingFloorRoomEditRef.add(item)
      })
    },

    // 编辑房间
    editRoom(item) {
      this.isEditRoom = true
      this.currentEditId = item.id

      this.$nextTick(() => {
        this.$refs.campusBuildingFloorRoomEditRef.edit(item)
      })
    },

    // 提交房间表单
    async handleBuildingFloorRoomEditOk() {
      this.fetchRooms(this.currentFloor.id)
    },

    // 删除房间
    async deleteRoom(id) {
      try {
        deleteAction(this.url.deleteCampusBuildingFloorRoom, { ids: id }).then(
          (res) => {
            this.$message.success('删除成功')
            this.fetchRooms(this.currentFloor.id)
          }
        )
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
  },
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.active {
  background-color: #e6f7ff;
}

.ant-list-item {
  cursor: pointer;
  padding: 12px 16px;
}

.ant-list-item:hover {
  background-color: #f5f5f5;
}

.ant-list-item-meta {
  align-items: center;
}
</style>
